<link rel="stylesheet" type="text/css" href="css/items.css" />
<link rel="stylesheet" type="text/css" href="css/trang_chu.css" />
<!-- OSX Style CSS files -->
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!--link rel="stylesheet" href="css/bootstrap.min.css"-->
<div class="right-column right">
    <?php if(Yii::app()->user->isGuest == false) { ?>
<div id="upload-panel">
    <h2 style="font-size: 22px;">Chia sẻ hình ảnh của bạn!</h2>
    <div id='osx-modal'>
        <input type='button' name='osx' value='Tạo Album' class='osx demo'/>
    </div>
    <!-- modal content -->
    <div id="osx-modal-content">
        <form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            
            <div class="fileupload-buttonbar">
                <h2>Tạo Album</h2>
                <div>
                    <input type="text" id="album_title" placeholder="Tiêu đề" class="title_album" name="title" required>
                    <input type="hidden" name="user_id" value="<?php echo Yii::app()->user->id; ?>">
                    <textarea rows="6" id="album_description" placeholder="Mô tả" name="description" required></textarea>
                    <span class="btn btn-success fileinput-button">
                        <i class="icon-plus icon-white"></i>
                        <span>Thêm ảnh</span>
                        <input type="file" name="files[]" multiple>
                    </span>
                    <button type="submit" class="btn btn-primary start">
                        <i class="icon-upload icon-white"></i>
                        <span>Tạo Album</span>
                    </button>
                </div>
                
            </div>
            <div id="upload-list">
            <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
            </div>
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        </form>

        <script id="template-upload" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-upload fade">
                <td class="preview"><span class="fade"></span></td>
                <td class="name"><span>{%=file.name%}</span></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                <!--<td class="title"><label>Tieu De: <input name="title[]" required></label></td>
                <td class="description"><label>Mo Ta: <input name="description[]" required></label></td>-->
                {% if (file.error) { %}
                <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                {% } else if (o.files.valid && !i) { %}
                <td>
                    <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
                </td>
                <td style="display: none;" class="start">{% if (!o.options.autoUpload) { %}
                    <button class="btn btn-primary">
                        <i class="icon-upload icon-white"></i>
                        <span>{%=locale.fileupload.start%}</span>
                    </button>
                    {% } %}</td>
                {% } else { %}
                {% } %}
                <td class="cancel">{% if (!i) { %}
                    <button class="btn btn-inverse">
                        <i class="icon-remove-sign icon-white"></i>
                        <span>{%=locale.fileupload.empty%}</span>
                    </button>
                    {% } %}</td>
            </tr>
            {% } %}
            </script>
            <!-- The template to display files available for download -->
            <script id="template-download" type="text/x-tmpl">
                {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-download fade">
                    {% if (file.error) { %}
                    <td></td>
                    <td class="name"><span>{%=file.name%}</span></td>
                    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                    <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                    {% } else { %}
                    <td class="preview">{% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
                        {% } %}</td>
                    <td class="name">
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
                    </td>
                    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                    <td colspan="2"></td>
                    {% } %}
                    <td class="delete">
                        <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                            <i class="icon-trash icon-white"></i>
                            <span>{%=locale.fileupload.destroy%}</span>
                        </button>
                        <input type="checkbox" name="delete" value="1">
                    </td>
                </tr>
                {% } %}
                </script>
                <script src="js/vendor/jquery.ui.widget.js"></script>
                <!-- The Templates plugin is included to render the upload/download listings -->
                <script src="js/tmpl.min.js"></script>
                <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
                <script src="js/load-image.min.js"></script>
                <!-- The Canvas to Blob plugin is included for image resizing functionality -->
                <script src="js/canvas-to-blob.min.js"></script>
                <!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
                <script src="js/bootstrap.min.js"></script>
                <script src="js/bootstrap-image-gallery.min.js"></script>
                <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
                <script src="js/jquery.iframe-transport.js"></script>
                <!-- The basic File Upload plugin -->
                <script src="js/jquery.fileupload.js"></script>
                <!-- The File Upload file processing plugin -->
                <script src="js/jquery.fileupload-fp.js"></script>
                <!-- The File Upload user interface plugin -->
                <script src="js/jquery.fileupload-ui.js"></script>
                <!-- The localization script -->
                <script src="js/locale.js"></script>
                <!-- The main application script -->
                <script src="js/main.js"></script>
                <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
                <script type='text/javascript' src='js/osx.js'></script>
            </div>                
        </div>
 <?php } else { ?>
    <div id="reg-form" class="logindiv">
<?php
$form = $this->beginWidget('CActiveForm', array(
    'id' => 'form-reg',
    'enableClientValidation' => true,
    'clientOptions' => array(
        'validateOnSubmit' => true,
    ),
        ));
?>
        <?php if(isset($_GET['reged']) && $_GET['reged'] == '1') { ?>
        <div style="padding: 7px 5px;
background: #FC7E7E;
border: 1px solid red;
margin-bottom: 5px;
font-size: 14px;">
            Đã đăng ký thành công!
        </div>
        <?php } ?>
    <h2>Đăng nhập</h2>
    <label>Tên đăng nhập:</label>
    <?php echo $form->textField($login, 'username', array(
        'placeholder' => 'Tên đăng nhập',
    )); ?>
    <?php echo $form->error($login, 'username'); ?>
    <label>Mật khẩu:</label>
    <?php echo $form->passwordField($login, 'password', array(
        'placeholder' => 'Mật khẩu',
    )); ?>
    <?php echo $form->error($login, 'password'); ?>
    <?php echo CHtml::submitButton('Đăng nhập', array('class' => 'btn right')); ?>
<?php $this->endWidget(); ?>
</div><!-- form -->
    <?php } ?>
<?php
        if(Yii::app()->user->isGuest == true) {
            $this->renderPartial('/site/register', array(
                'model' => $thanh_vien,
            ));
        }
        ?>
<div id="social">
    <h2>Chia sẻ:</h2><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/social.png" />
</div>
</div>
        <div id="famous-pics">
            <div id="container" class="container photos clearfix">
                <?php
                $album = new Album();
                $this->widget('zii.widgets.CListView', array(
        'dataProvider' => $album->searchByDescTimestamp(),
        'itemView'=>'_indexImageThumbnail',   // refers to the partial view named '_post'
        'template' => '{items}',
    )); ?>
               
            </div>
            <script type="text/javascript">
                $(function () {

                    var $container = $('#container');

                    $container.imagesLoaded(function () {
                        $container.isotope({
                            itemSelector: '.photo'
                        });
                    });
                });
            </script>
        </div>
        <div class="clear">
        </div>
